<template>
 <div class="chatlist">
         <div class="chatone" @click="upSelectOne(item)" v-for="item in frindslist" :key="item.id">
             <img :src="item.headerimg" alt="" :class="[item.isonline=='true'?'noFilter':'isFilter']">
             <span v-if="item.msgnumber">{{item.msgnumber}}未读</span>
             <span>{{item.author}}</span>
             <p>
                 <slot></slot>
             </p>
         </div>
         <div class="footer">
             <el-button @click="updatalist">刷新列表</el-button>
         </div>
     </div>
</template>

<script>
   export default {
      data() {
          return {

          }
      },
      props:[
          "frindslist",
          "noreadmsglist"
      ],
      //生命周期 - 创建完成
     created(){ 
       
     },

     //DOM挂载完毕
     mounted() {
        let con=io.connect("http://localhost:3001")
        con.on("login",(data)=>{
            console.log(data)    
        })
     },
      methods: {
          //刷新列表
          updatalist(){
            //   this.$emit("getChatlist")
          },
          //触发选中好友聊天事件
          upSelectOne(e){
              this.$emit("selectOne",e)
          }

      },
 }
</script>

<style lang='less' scoped>
.noFilter{
    filter:grayscale(0);
    width: 60px;
}
.isFilter{
    filter:grayscale(1)
}
  .chatlist {
      flex: 1;
    border-right: 1px solid #ccc;
    .footer{
        width: 100%;
        height: 40px;
        text-align: center;
        .el-button{

        }
    }
    .chatone {
        cursor: pointer;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 60px;
        padding: 10px 10px;
  
        &:nth-of-type(1){
            border-top: none;
        }
        &:hover{
            background-color: #f5f5f5;
        }
      img {
          display: inline-block;
          border-radius: 50%;
          height: 40px;
          width: 40px;   
      }

      span {

      }

      p {
          
          &:hover{
              color: red;
          }
      }
    }
  }

</style>